<template>
  <div class="Lo" v-if="loginShow">
    <div class="HH">
        <h1>邮箱登录</h1>
          <el-form
            ref="ruleFormRef"
            :model="ruleForm"
            status-icon
            :rules="rules"
            label-width="60px"
            class="demo-ruleForm"
          >
            <el-form-item label="账号" prop="account">
              <el-input v-model="ruleForm.account" type="text" placeholder="请输入邮箱号" :prefix-icon="UserFilled"/>
            </el-form-item>

            <el-form-item label="密码" prop="pass">
              <el-input v-model="ruleForm.pass" type="password"  placeholder="请输入账号密码" autocomplete="off" :prefix-icon="Key" show-password/>
            </el-form-item>
            
            <el-form-item>
              <el-button type="primary" @click="goV"
                v-show="do1">确定</el-button
              >

              <el-button type="primary" @click="submitForm(ruleFormRef)"
                v-show="do2">确定</el-button
              >
              <el-button @click="resetForm(ruleFormRef)">重置</el-button>
            </el-form-item>

            <el-form-item >
              <!-- 忘记密码？ -->
              <ForgetPwd />
              <el-checkbox v-model="ruleForm.remember" class="rememberMe">记住我</el-checkbox>
            </el-form-item>
          </el-form>
          <keep-alive>
             <RouterView v-if="$route.meta.keepAlive">
             </RouterView>
          </keep-alive>
    </div>
  
</div>
  
  <!-- <RouterView/> -->
<RouterView v-if="!$route.meta.keepAlive"></RouterView>
</template>

<script lang="ts" setup>
import {useRoute,useRouter} from 'vue-router'
import {
  Key,
  Lock,
  UserFilled,
} from "@element-plus/icons-vue";
import { reactive, ref ,inject} from 'vue'
import type { FormInstance } from 'element-plus'
import { ElMessage } from 'element-plus'
import ForgetPwd from './ForgetPwd.vue';

//通过注入的方法来获取axios实例
const $http:any=inject('$http') 
//定义路由器
const $router=useRouter()
const $route=useRoute()

const ruleFormRef = ref<FormInstance>()

const do1 = ref(true)
const do2 = ref(false)

const loginShow = ref(true)

const ruleForm = reactive({
  pass: '',
  account: '',
  remember:''
})
//校验
const validateAccount = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入账号'))
  }else {
    callback()
  }
}

const validatePass = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入密码'))
  } else {
    callback()
  }
}

const rules = reactive({
  pass: [{ validator: validatePass, trigger: 'blur' }],
  account: [{ validator: validateAccount, trigger: 'blur' }],
})

$router.beforeEach(async(to, from, next) => {
    if (to.path === '/user') {
      next({ path: '/' })
    }else{
      // to要进入的目标路由,到哪去Erom离开的路由,哪来的savePosition内容
        //判断是否需要缓存
        if(from.path =='/verify'){
          to.meta.keepAlive = true;  // 让 列表页 缓存，即不刷新
        }else {
          to.meta.keepAlive = false;  // 让 列表页 即不缓存，刷新
        }
        next()
      }
})

//验证码验证
const goV = ()=>{
  if (ruleForm.account!=''&&ruleForm.pass!='') {
     $router.push('/verify')
     do1.value=false
     do2.value=true
   }else{
    ElMessage({
        message: '请填写账号信息',
        type: 'error',
    })
  }
}
    
//表单提交
const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
   formEl.validate(async (valid) => {
    if (valid) {
      const sendData = {
        userName:ruleForm.account,
        password: ruleForm.pass,
      }
      login(sendData)
    } else {
      ElMessage({
        message: '登录失败，请重试',
        type: 'error',
    })
      return false
    }
  })
  //调用方法请求后端
  async function login(sendData) {
    let { data } = await $http.post('/user', sendData);
    if(data.code == 20071){
      ElMessage({
        message: '登录成功',
        type: 'success',
    })
    // $router.push('/xxx')
    }else{
      resetForm
      ElMessage({
        message: '登录失败，请重试',
        type: 'error',
      })
    }
  }
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

</script>

<style scoped>
    .Lo{
      width: 100%;
      height: 400px;
    }
    .HH{
      position: absolute;
      z-index: 0;
      /* top: 10%;
      left: 20%; */
      width: 450px;
      /* border: 1px solid rgb(225, 216, 210); */
    }
    h1{
      text-align: center;
    }
    :deep(.el-button+.el-button){
      margin-left: 30px;
    }
    .rememberMe{
      left: 60px;
    }
    :deep(.el-input){
      border-radius: 12px;
      height: 50px;
      width: 95%;
    }
    :deep(.el-button){
      height: 45px;
      width: 165px;
    }
    .FR{
      margin-left: 0px;
    }
</style>